import React, { Component } from 'react';
import {CSSTransition, TransitionGroup} from 'react-transition-group';
import './index.less'
import logo from '../../common/images/logo.png'
class Home extends Component {
    constructor(){
        super();
        this.state={isShow:false}
    }
    changeShow=()=>{
        this.setState({isShow: !this.state.isShow});
    }
    handleClick = (event)=>{
        let id = event.target.dataset.id;
        this.props.chooseLesson(id);
        this.changeShow()
        // this.props.getLessons();
        // this.setState({isShow: !this.state.isShow});
      }
    render() { 
        return ( 
           <div className="header">
                <div className="header-logo">
                    <img src={logo} alt="" />
                    <div onClick={this.changeShow}>
                    {this.state.isShow ? <i className="iconfont icon-guanbi"></i>:<i className="iconfont icon-uilist"></i>}
                    </div>
                </div>
                <TransitionGroup>
                    {this.state.isShow?
                     <CSSTransition
                     timeout={1000}
                     classNames="fadeIn"
                   >
                    <ul className="header-list" onClick={this.handleClick}>
                    <li className={this.props.currentLesson==1?'active':''} data-id="1">JavaScript课程</li>
                    <li className={this.props.currentLesson==2?'active':''} data-id="2">Node.js课程</li>
                    <li className={this.props.currentLesson==3?'active':''} data-id="3">HTML5课程</li>
                    </ul>
                    </CSSTransition>
                    :null}
                </TransitionGroup>
           </div>
        );
    }
}
 
export default Home;